<template>
  <div class="wrap">
    <div class="content">
      <ul class="content-left ">
        <li :class="active == 0 ? 'first active' : 'first' " @click="setActivity(0)">活动概况</li>
        <li :class="active == 1 ? ' active' : '' " @click="setActivity(1)">活动管理</li>
        <li :class="active == 2 ? ' active' : '' " @click="setActivity(2)">评论管理</li>
        <li :class="active == 3 ? ' active' : '' " @click="setActivity(3)">标签管理</li>
      </ul>
      <div class="content-right">



        <!-- 活动管理 -->
        <ac-man v-if="active == 1 && hackReset"></ac-man>
        <!-- 评论管理 -->
        <ac-com v-else-if="active == 2  && hackReset"></ac-com>
        <!-- 活动标签 -->
        <ac-tag v-else-if="active == 3  && hackReset"></ac-tag>
        <!-- 活动概况组件 -->
        <sc-man v-else></sc-man>
      </div>
    </div>
  </div>
</template>
<script>
import acMan from "./activity-man.vue";
import scMan from "./situation-activities";
import acTag from "./activity-tags.vue"
import acCom from "./commentList.vue"
export default {
  created(){
   let num = this.$route.query.ActivityNum || 0;
   this.setActivity(num);
  },
  components: {
    acMan,
    scMan,
    acTag,
    acCom
  },
  data() {
    return {
      active: 0,
      hackReset: false
    };
  },
  methods: {
    /**
     * 设置选项卡切换
     */
    setActivity: function (num) {
      let that = this
      this.hackReset = false
      that.active = num
      this.$nextTick(() => {
        this.hackReset = true
      })

    }
  }
};
</script>
<style scoped>
.wrap {
  /* padding-top: 70px;
  padding-left: 129px; */
  width: 90%;
  margin: 40px auto;
}
.title {
  height: 33px;
  line-height: 33px;
  font-size: 24px;
  font-family: PingFangSC-Medium;
  font-weight: bold;
  /* padding-left: 7px; */
}
.title img {
  width: 28px;
  height: 26px;
  float: left;
  padding-top: 5px;
  margin-right: 10px;
}


.content{
  position: relative;
}

.content ul.content-left  {
  /* float: left; */
  background: #f6f6f6;
  width:202px;
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #000000;
  margin-top: 90px;
  position: absolute;
}
.content ul.content-left  li.active {
  color:rgba(75,116,255,1);
  border-left: 2px solid rgba(77,124,254,1);
}
.content ul.content-left  li {
  width:202px;
height:64px;
background:rgba(248,250,251,1);
  text-align: center;
  line-height: 64px;
  cursor: pointer;
  font-size:14px;
font-family:PingFangSC-Medium;
font-weight:500;
color:rgba(119,140,162,1);
}

.content-right{
  padding-left:210px;
}
</style>
